<template>
    <div class="regist-client-dialog-view">

        <el-dialog
                v-model="dialogShow"
                :close-on-click-modal="false"
                width="500px"
                title="选择更换跟进职员"
                @closed="close"
        >

            <el-form
                    :rules="rule"
                    ref="refForm"
                    :model="formData"
                    label-width="110px"
                    size="small"
            >
                <el-form-item label="负责跟进职员" style="width: 100%" prop="headId">
                    <el-select
                            v-model="formData.headId"
                            style="width: 100%"
                            placeholder="请选择职员"
                            @change="headChange"
                    >
                        <el-option
                                v-for="item in headOptions"
                                :key="item.id"
                                :label="item.realName"
                                :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="关联营销任务">
                    <el-input
                            :disabled="!formData.headId"
                            ref="refInput"
                            v-model="formData.saleTaskNo"
                            placeholder="请输入营销任务"
                            @clear="taskClear"
                            @blur="taskBlur"
                            @focus="taskFocus"
                    />
                </el-form-item>
            </el-form>

            <template #footer>
                <div class="dialog-footer">
                    <el-button
                            class="border-btn"
                            size="small"
                            @click="close"
                    >取消</el-button>
                    <el-button
                            class="main-btn"
                            size="small"
                            type="primary"
                            @click="confirm"
                    >确定</el-button>
                </div>
            </template>
        </el-dialog>

        <chanceTaskDialog ref="taskDialog" :head-id="formData.headId" :product-id="datas.productId" @confirm="taskConfirm"/>

    </div>
</template>

<script>
    import {crmStore} from "../../../../store";
    import { defineComponent, defineAsyncComponent, reactive, toRefs, inject, getCurrentInstance, ref } from 'vue'
    export default defineComponent({
        name: "changeHeadDialog",
        components:{
            chanceTaskDialog:defineAsyncComponent(() => import('../../modules/chanceTaskDialog.vue'))
        },
        props:{
            id:{
                type:Number,
                default:0
            },
            datas:{
                type:Object,
                default:{}
            }
        },
        emits:['success'],
        setup(props,{emit}){
            const currentInstance = getCurrentInstance()
            const api = inject('api')
            const headOptions = crmStore.getters['company/getHeadOptions']
            const rule = ref({
                headId:[
                    {
                        required: true,
                        message:'请选择负责跟进人',
                        trigger: 'change',
                    },
                ]
            })

            var data = reactive({
                dialogShow:false,
                refForm:null,
                taskDialog:null,
                formData:{
                    registerCustomerId:props.id,
                    headName:'',
                    headId:'',
                    saleTaskId:'',
                    saleTaskNo:'',
                    selectName:'',
                },
                sellerTaskRef:null,
                refInput:null,
            })

            const headChange = () => {
                let index = headOptions.findIndex(a=>a.id == data.formData.headId)
                if (index != -1){
                    data.formData.headName = headOptions[index].realName
                }
            }

            const sellerClear = () => {
                data.formData.registerCustomerId = 0
            }

            const sellerFocus = () => {
                data.sellerTaskRef.openPopover();
            }

            const sellerConfirm = (item) => {

            }

            const taskConfirm = (val) => {
                data.formData.saleTaskId = val.saleTaskId
                data.formData.saleTaskNo = val.taskNo
            }

            const taskBlur = () => {
                if (!data.formData.selectName) {
                    data.formData.saleTaskId = 0
                    data.formData.saleTaskNo = ''
                }
                if (data.formData.saleTaskNo) {
                    data.formData.selectName = data.formData.saleTaskNo
                }
            }

            const taskFocus = () => {
                // data.chancePop.openPopover()
                data.taskDialog.openDialog()
                data.refInput.blur()
            }

            const taskClear = () => {
                data.formData.saleTaskId = 0
                data.formData.taskName = ''
            }

            const close = () => {
                data.formData = {
                    registerCustomerId:0,
                    headName:'',
                    headId:'',
                    saleTaskId:'',
                    taskName:'',
                    selectName:'',
                }
                data.dialogShow = false;
                setTimeout(()=>{
                    data.refForm.clearValidate()
                },500)
            }

            const confirm = () => {
                data.refForm.validate((val)=>{
                    if (val){
                        let a = {...data.formData}
                        a.headId = Number(a.headId)
                        a.saleTaskId = Number(a.saleTaskId)
                        a.registerCustomerId = Number(props.id)
                        api.task.TASK_CUSTOMER_CHANGE_FOLLOW_STAFF(a).then(res=>{
                            if (!res.code){
                                currentInstance.proxy.customMessage({type:'success',message:'更改成功'})

                                emit('success')
                                close()
                            }else {
                                currentInstance.proxy.customMessage({type:'error',message:res.msg})
                            }
                        }).catch(err=>{

                        })
                    }
                })
            }

            const open = () => {
                data.dialogShow = true;
            }

            return{
                ...toRefs(data),
                rule,
                headOptions,

                close,
                confirm,
                open,
                headChange,
                sellerClear,
                sellerFocus,
                sellerConfirm,
                taskBlur,
                taskFocus,
                taskClear,
                taskConfirm,
            }
        }
    })
</script>

<style scoped>

</style>
